<!DOCTYPE html>
<html lang="ch-zn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./node_modules/bootstrap-icons/font/bootstrap-icons.css">
    <script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
    <title>邮局订报管理系统首页</title>
</head>

<body>

    <div class="container">
        <div class="include" file="headbar.html"></div>
        <br/><br/>
        <div class="row">
            <div class="input-group mb-3">
                <span class="input-group-text" id="basic-addon1">报纸编号</span>
                <input type="text" class="form-control" placeholder="报纸编号" aria-label="Paperid" aria-describedby="basic-addon1" id="paperid">
                <span class="input-group-text text-bg-secondary">OR</span>
                <span class="input-group-text" id="basic-addon2">报纸名称</span>
                <input type="text" class="form-control" placeholder="报纸名称" aria-label="papername" aria-describedby="basic-addon2" id="papername">
            </div>
        </div>
        <br/>
        <div class="row">
            <div class="d-grid gap-2 col-4 mx-auto">
                <button class="btn btn-primary" type="button" onclick="query_search()">查询</button>
            </div>
        </div>
        <br/>
        <div class="row">
            <div class="d-grid gap-2 col-4 mx-auto">
                <button class="btn btn-primary" type="button" onclick="query_output_everything()">查询所有</button>
            </div>
        </div>
        <br/>
        <div id="output">

        </div>
    </div>
</body>
<script type="text/javascript" src="./node_modules/jquery/dist/jquery.js" charset="UTF-8"></script>
<script>
    $(".include").each(function() {
        if (!!$(this).attr("file")) {
            var $includeObj = $(this);
            $(this).load($(this).attr("file"), function(html) {
                $includeObj.after(html).remove(); //加载的文件内容写入到当前标签后面并移除当前标签
            })
        }
    });

    // 后台url
    url0 = 'http://localhost:80/index.php/Mysql/'

    function query_search() {
        var input_paperid = document.getElementById("paperid").value;
        var input_papername = document.getElementById("papername").value;
        console.log(url0);
        if (input_paperid) {
            var inputdata = {
                "input_paperid": input_paperid,
            }
            $.ajax({
                methods: "GET",
                url: url0 + "mysql_get_bygid/input_table_name/报纸信息/",
                async: pageYOffset,
                data: inputdata,
                dataType: "json",
                contentType: "application/json;charset=UTF-8",
                success: function(data) {
                    if (data == 'null') {
                        alert("查询为空！");
                        return;
                    }
                    console.log(data);
                    data_np = Object.values(data);
                    var output = document.getElementById('output');
                    var value_np_out = "";
                    value_np_out += "<table class='table'>" + "<thead>" + "<tr>" + "<th scope='col'>图书编号</th><th scope='col'>图书名称</th><th scope='col'>出版日期</th><th scope='col'>出版社</th><th scope='col'>位置</th><th scope='col'>目前数量</th>" + "</tr>" + "</thead>" + "<tbody > "
                    for (i1 = 0; i1 < data_np.length; i1++) {
                        value_np_out += "<td>" + data_np[i1] + "</td>";
                    }
                    value_np_out += "</tr></tbody><table>";
                    console.log(value_np_out);
                    output.innerHTML = value_np_out;
                },
                error: function(err) {
                    // 请求失败， err是失败的内容
                    print("请求失败");
                },
                complete: function(e) {
                    // 不管成功还是失败都会调用这个函数
                }
            })
        } else if (input_papername) {
            var inputdata = {
                "input_papername": input_papername,
            }
            $.ajax({
                methods: "GET",
                url: url0 + "mysql_get_bygname/input_table_name/报纸信息/",
                async: pageYOffset,
                data: inputdata,
                dataType: "json",
                contentType: "application/json;charset=UTF-8",
                success: function(data) {
                    if (data == 'null') {
                        alert("查询为空！");
                        return;
                    }
                    console.log(data);
                    data_np = Object.values(data);
                    var output = document.getElementById('output');
                    var value_np_out = "";
                    value_np_out += "<table class='table'>" + "<thead>" + "<tr>" + "<th scope='col'>图书编号</th><th scope='col'>图书名称</th><th scope='col'>出版日期</th><th scope='col'>出版社</th><th scope='col'>位置</th><th scope='col'>目前数量</th>" + "</tr>" + "</thead>" + "<tbody > "
                    for (i1 = 0; i1 < data_np.length; i1++) {
                        value_np_out += "<td>" + data_np[i1] + "</td>";
                    }
                    value_np_out += "</tr></tbody><table>";
                    console.log(value_np_out);
                    output.innerHTML = value_np_out;
                },
                error: function(err) {
                    // 请求失败， err是失败的内容
                    print("请求失败");
                },
                complete: function(e) {
                    // 不管成功还是失败都会调用这个函数
                }
            })
        } else {
            alert("error");
        }
    }



    function query_output_everything() {
        $.ajax({
            url: 'http://localhost:80/index.php/Mysql/mysql_get_all/input_table_name/报纸信息',
            success: function(data) {
                //转成数组
                data_np = Object.values(data);
                console.log(data_np.length);
                console.log(typeof(data_np.length));
                //找到要输出的位置
                var output = document.getElementById('output');
                //初始化输出文本
                var value_np_out = "";
                value_np_out += "<table class='table'>" + "<thead>" + "<tr>" + "<th scope='col'>图书编号</th><th scope='col'>图书名称</th><th scope='col'>报纸单价</th><th scope='col'>报纸规格</th><th scope='col'>出版社</th>" + "</tr>" + "</thead>" + "<tbody > "
                for (i1 = 0; i1 < data_np.length; i1++) {
                    var value_np = Object.values(data_np[i1])
                    console.log(value_np);
                    value_np_out += "<tr>"
                    for (i2 = 0; i2 < value_np.length; i2++) {
                        value_np_out += "<td>" + value_np[i2] + "</td>";
                    }
                    value_np_out += "</tr>"
                    console.log(value_np_out);
                }
                value_np_out += "</tbody><table>"
                output.innerHTML = value_np_out;
            },
            error: function(err) {
                // 请求失败， err是失败的内容
                print("请求失败");
            },
            complete: function(e) {
                // 不管成功还是失败都会调用这个函数
            }
        })
    }
</script>

</html>